<template>
    <div class="record">
        <div class="header">
            <div class="header-left">
                <img class="header-left-icon" src="@/assets/images/record-ic.png" />
                <div class="header-left-title">运动记录</div>
                <img class="header-left-back" src="@/assets/images/record-back.png" @click="back" />
            </div>
            <div class="header-right">
                <el-form :model="formData" label-width="120px" size="large" :inline="true">
                    <el-form-item v-if="mode ==0">
                        <el-select clearable v-model="formData.tcnameId" @change="getData" placeholder="请选择考试计划" style="width: 300px;">
                            <el-option v-for="dict in tcnameList" :key="dict.id" :value="dict.id" :label="dict.tcname" />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-radio-group v-model="formData.rb" size="large" fill="#465498" text-color="#fff" @change="handleRadioChange">
                            <el-radio-button label="全部" :value="0" />
                            <el-radio-button label="本周" :value="1" />
                            <el-radio-button label="今日" :value="2" />
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="选择时间：">
                        <el-date-picker @change="handleDateConfirm" v-model="formData.date" type="datetimerange" start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <div class="box">
            <div class="grade">
                <div class="grade-item" :style="{color:index ==activeIndex?'#fff':'#a0d4ee',fontSize:index ==activeIndex?'48px':'38px'}" v-for="(item,index) in grade" :key="item.value" @click="handleClick(index)">{{ item.label }}</div>
            </div>
            <img class="left-bottom" src="@/assets/images/examination-left-bottom.png" />

            <!-- <div class="mode">
                <div>测试模式</div>
                <div>练习模式</div>
            </div> -->
            <div class="content">
                <div class="mode">
                    <div class="mode-item" :class="{ 呀: mode==0 }" @click="modeChange(0)">测试模式</div>
                    <div class="mode-item" :class="{ selected: mode==1 }" @click="modeChange(1)">练习模式</div>

                </div>
                <div class="content-table">
                    <div class="content-table-header">
                        <div class="content-table-header-cell" style="width:416px;">时间</div>
                        <div class="content-table-header-cell" style="width:160px;">模式</div>
                        <div class="content-table-header-cell" style="width:166px;">姓名</div>
                        <div class="content-table-header-cell" style="width:139px;">性别</div>
                        <div class="content-table-header-cell" style="width:166px;">班级</div>
                        <div class="content-table-header-cell" style="width:166px;">成绩</div>
                        <div class="content-table-header-cell" style="width:166px;">评分</div>
                        <div class="content-table-header-cell" style="width:216px;">查看</div>
                    </div>
                    <div class="content-table-body">
                        <div class="content-table-body-row" v-for="(item, index) in list" :key="index">
                            <div class="content-table-body-row-cell" style="width:416px;">{{ item.sjTcsj }}</div>
                            <div class="content-table-body-row-cell" style="width:160px;">
                                <div class="content-table-body-row-cell-mode">{{item.mode==1?'练习':'测试'}}</div>
                            </div>
                            <div class="content-table-body-row-cell" style="width:166px;">{{ item.sjSname }}</div>
                            <div class="content-table-body-row-cell" style="width:139px;">{{item.sjSex=='0'?'男':'女'}}</div>
                            <div class="content-table-body-row-cell" style="width:166px;">{{ classList.find(f => f.id == item.sjBjid)?.bjName }}</div>
                            <div class="content-table-body-row-cell" style="width:166px;">{{ item.sjDfsz }}</div>
                            <div class="content-table-body-row-cell" style="width:166px;">{{ item .sjFs}}</div>
                            <div class="content-table-body-row-cell" style="width:216px; cursor: pointer;" @click="showMedia = true">查看</div>
                        </div>
                    </div>
                </div>

                <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getData" />

            </div>
        </div>
        <Teleport to="body">
            <div class="dialog" v-if="showMedia">
                <div class="dialog-media">
                    <video ref="videoEl" controls src="@/assets/images/video.mp4"></video>
                    <!-- <img src="@/assets/images/login-background.jpg"/> -->
                </div>
                <img class="dialog-close" src="@/assets/images/close.png" @click="showMedia = false" />

            </div>
        </Teleport>
    </div>
</template>
 
<script setup name="Record">
import { ref, computed, onMounted, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import { getProject, getPlanList, getClassList, getTrainingList, getTcnameList } from "@/api/tc/plan";
import useUserStore from '@/store/modules/user';
import { back } from "@/utils/back";
const userStore = useUserStore()
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const grade = ref([{ label: '立定跳远', value: 9 }, { label: '跳绳', value: 6 }, { label: '50米跑', value: 2 }, { label: '800米跑', value: 13 }, { label: '1000米跑', value: 12 },]);
const showMedia = ref(false);
const classList = ref([]);//班级
const activeIndex = ref(0);//模式0=测试  1练习
const mode = ref(0);
const tcnameList = ref([]);//考试计划列表
const tcnameId = ref('');
const formData = ref({
    rb: 0,//0 全部 1本周  2今日
    date: []
})
const queryParams = ref({
    pageNum: 1,
    pageSize: 8,
    sjTcxmid: grade.value[0].value,
    params: {
        beginSjCreate: "",
        endSjCreate: "",
    }

})
const total = ref(0);
const list = ref([]);
// 项目时间更改
function handleClick(index) {
    activeIndex.value = index;
    queryParams.value.sjTcxmid = grade.value[index].value;
    queryParams.value.params['beginSjCreate'] = "";
    queryParams.value.params['endSjCreate'] = "";
    formData.value.date = [];
    getData();
}

onMounted(async () => {
    await getDictData();
    getData()
})

//确定
function handleDateConfirm(e) {
    if (e) {
        formData.value.rb = 0;
    } else {
        queryParams.value.params['beginSjCreate'] = "";
        queryParams.value.params['endSjCreate'] = "";
        formData.value.date = [];
    }

    getData();
}

//全部 本周 今日选择
function handleRadioChange(e) {
    // 获取当前时间
    const now = proxy.dayjs();
    switch (e) {
        case 0:
            queryParams.value.params['beginSjCreate'] = "";
            queryParams.value.params['endSjCreate'] = "";
            formData.value.date = [];
            break;
        case 1://本周
            // 本周开始时间（周一 00:00:00）
            const weekStart = now.startOf('week').add(1, 'day').startOf('day');
            // 本周结束时间（周日 23:59:59）
            const weekEnd = now.endOf('week').add(1, 'day').endOf('day');

            const startStr = weekStart.format('YYYY-MM-DD HH:mm:ss')
            const endStr = weekEnd.format('YYYY-MM-DD HH:mm:ss')
            queryParams.value.params['beginSjCreate'] = startStr;
            queryParams.value.params['endSjCreate'] = endStr;
            formData.value.date = [];

            break;
        case 2://当天
            // 当天开始
            const startOfDay = now.startOf('day').format('YYYY-MM-DD HH:mm:ss')
            // 当天结束
            const endOfDay = now.endOf('day').format('YYYY-MM-DD HH:mm:ss')
            queryParams.value.params['beginSjCreate'] = startOfDay;
            queryParams.value.params['endSjCreate'] = endOfDay;
            formData.value.date = [];
            break;
    }
    getData();
}


//获取项目列表
async function getDictData() {
    console.log(":aa", userStore)
    //const res = await getProject({xmStatus:1});
    const res = await getClassList();
    classList.value = res.rows;
    const res1 = await getTcnameList({
        pageNum: 1,
        pageSize: 100,
        tcxxid: userStore.deptId

    });
    tcnameList.value = res1.rows;


}

/**
 * 获取数据
 */
async function getData() {
    try {
        proxy.$modal.loading('加载中');
        let res;
        if (formData.value.date.length) {
            queryParams.value.params['beginSjCreate'] = formData.value.date[0];
            queryParams.value.params['endSjCreate'] = formData.value.date[1];
        } else {
            // queryParams.value['beginSjCreate'] = "";
            // queryParams.value['endSjCreate'] = "";
        }
        //0 考试  1练习
        if (mode.value == 0) {
            queryParams.value['tcnameid'] = formData.value.tcnameId;
            res = await getPlanList(queryParams.value);
        } else {
            res = await getTrainingList(queryParams.value);
        }
        total.value = res.total;
        list.value = res.rows;

    } catch (err) {
        console.error(err)
    } finally {
        proxy.$modal.closeLoading();
    }
}

//考试与练习模式切换
function modeChange(e) {
    //清空时间
    formData.value.date = [];
    queryParams.value.params['beginSjCreate'] = "";
    queryParams.value.params['endSjCreate'] = "";
    mode.value = e;
    getData();
}


</script>

<style scoped lang="scss">
.record {
    width: 100%;
    height: 100%;
    background: url("@/assets/images/examination-bg.png") no-repeat;
    background-size: 100% 100%;

    box-sizing: border-box;
    // justify-content: space-between;
    // overflow-y: auto;
    overflow: hidden;
    position: relative;
}

.box {
    display: flex;
}

.mode {
    position: absolute;
    display: flex;
    top: 130px;
    left: 300px;
    width: 300px;
    justify-content: space-between;
    &-item {
        cursor: pointer;
        font-family: DingTalk JinBuTi;
        font-size: 34px;
        color: #ffffff;
        &.selected {
            background: linear-gradient(180deg, #ffffff 0%, #73deff 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
    }
}

// :deep(.el-radio-button__inner){
//     background: #465498;
// }

:deep(.el-date-editor) {
    background: transparent;

    .el-range-input {
        color: #fff;
    }
}
:deep(.el-form-item__label) {
    color: #fff;
}
:deep(.el-pagination__total) {
    color: #fff;
}
:deep(.el-select__wrapper) {
    background: transparent;

    .el-select__selected-item {
        color: #fff;
    }
}
:deep(.pagination-container) {
    background: transparent !important;
}
:deep(.el-pagination) {
    // position: absolute;
    // bottom: 0px;
    background: transparent !important;
    padding-right: 50px;
}
:deep(.el-pagination__goto) {
    color: #fff;
}
:deep(.el-pagination__jump) {
    color: #fff;
    background: transparent !important;
}
:deep(.el-pagination .el-input__wrapper) {
    background: transparent !important;
    .el-input__inner {
        color: #fff;
    }
}

.dialog {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 240px;
    font-weight: bold;
    &-close {
        position: absolute;
        right: 5%;
        top: 2%;
        z-index: 100;
        cursor: pointer;
    }

    &-media {
        width: 80%;
        height: 90%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
            width: 100%;
            height: 100%;
        }
        video {
            width: 100%;
            height: 100%;
        }
    }
}

.header {
    display: flex;
    width: 100%;
    height: 178px;
    justify-content: space-between;
    align-items: center;
    padding: 0 50px;
    &-left {
        display: flex;
        align-items: center;
        &-icon {
            width: 65px;
            height: 65px;
        }
        &-title {
            margin-left: 14px;
            font-family: YouSheBiaoTiHei;
            font-size: 60px;
            line-height: 58px;
            letter-spacing: 0.04em;
            font-variation-settings: "opsz" auto;
            background: linear-gradient(0deg, #36cfff 0%, #ffffff 66%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            text-fill-color: transparent;
        }

        &-back {
            cursor: pointer;
            margin-left: 27px;
            width: 40px;
            height: 40px;
            &:hover {
                opacity: 0.8;
            }
        }
    }
    &-right {
        // font-family: YouSheBiaoTiHei;
        // font-size: 60px;
        // line-height: 58px;
        // letter-spacing: 0.04em;
        color: #ffffff;
        padding-top: 140px;
    }
}
.left-bottom {
    position: absolute;
    left: 38px;
    bottom: 40px;
    width: 235px;
    height: 262px;
}
.content {
    width: 1596px;
    // height: 850px;

    overflow: hidden;
    &-table {
        // margin-top: 20px;
        display: flex;
        flex-direction: column;
        // height: 730px;
        width: 1596px;
        &-body {
            &-row {
                margin-top: 10px;
                display: flex;
                height: 84px;
                width: 100%;
                border-radius: 6px;
                background: #009dff;
                &-cell {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    height: 100%;
                    color: #ffffff;
                    // flex: 1;
                    font-size: 30px;
                    &-mode {
                        width: 111px;
                        height: 44px;
                        border-radius: 35px;
                        background: #ff9a00;
                        font-size: 30px;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                    }
                }
            }
        }

        &-header {
            display: flex;
            height: 84px;
            width: 100%;
            background: #005083;
            &-cell {
                display: flex;
                justify-content: center;
                align-items: center;
                height: 100%;
                color: #ffffff;
                // flex: 1;
                font-size: 30px;
            }
        }
    }
}
.grade {
    width: 300px;
    padding-left: 30px;
    margin-top: 80px;
    // background: #ffffff;
    &-item {
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: center;
        font-family: DingTalk JinBuTi;
        font-size: 38px;
        font-weight: normal;
        line-height: 58px;
        font-variation-settings: "opsz" auto;
        font-feature-settings: "kern" on;
        color: #a0d4ee;
    }
}
</style>

